<template>
  <tm-card
    :height="220"
    :margin="props.margin"
    :padding="props.padding"
    :title="props.title"
    :isDivider="false"
  >
    <!-- 右上角插槽 -->
    <template #status>
      <view class="custom-home-card-extra" @click="props.extra.onClick">
        <tm-icon
          v-if="props.extra.beforeIcon"
          :font-size="props.extra.size"
          :name="props.extra.beforeIcon"
          color="#424A57"
        />
        <tm-text
          class="custom-home-card-extra-text"
          :label="props.extra.content"
          color="#424A57"
          :fontSize="24"
        /><tm-icon
          v-if="props.extra.afterIcon"
          :font-size="props.extra.size"
          :name="props.extra.afterIcon"
          color="#424A57"
        />
      </view>
    </template>

    <!-- 正文插槽 -->
    <template #content>
      <view class="custom-home-card-extra-content">
        <view
          v-for="(item, index) in props.list"
          :key="index"
          class="custom-extra-item"
          @click="menuClick(item, props.title)"
        >
          <tm-icon
            v-if="item.infoIcon"
            :font-size="40"
            :name="item.infoIcon"
            color="#366EF4"
            class="custom-home-card-content-value"
          />
          <tm-text
            v-else
            :fontSize="36"
            :color="'#232323'"
            class="custom-home-card-content-value"
          >
            {{ item.count }}
          </tm-text>
          <tm-text :fontSize="24" :color="'#6f7686'">{{
            item.infoTitle
          }}</tm-text>
        </view>
      </view>
    </template>
  </tm-card>
  <formModal
    :show="show"
    @close="close"
    @confirm="confirm"
    :className="'center'"
    :menuInfo="menuInfo!"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import orgCtrl from '@/ts/controller'
import { InfoPortal, ExtraPortal } from '../common/portalType'
import formModal from '@/components/customModal/formModal.vue'

type Props = {
  title: string // 卡片标题
  margin: [number, number] // 卡片外边距
  padding: [number, number] // 卡片内外边距
  extra: ExtraPortal // 卡片右上角信息
  list: InfoPortal[] // 卡片正文列表
}
const props = defineProps<Props>()
let show = ref<boolean>(false)
let menuInfo = ref<InfoPortal>()

/** 菜单点击事件 */
const menuClick = (info: InfoPortal, title: string) => {
  if (title === '快捷操作') {
    menuInfo.value = info
    openModal()
  } else if (title === '办事') {
    info.onClick!()
  } else {
    return false
  }
}

/** 打开弹窗 */
const openModal = () => {
  show.value = true
}

const confirm = async (val: any) => {
  if (val.submitType === 'search') {
    if (val?.result.values) {
      const result = await orgCtrl.user.applyJoin(val?.result.values)
      if (result) {
        uni.showToast({
          title: '申请成功',
          icon: 'none'
        })
      }
    }
  } else {
    const res = await orgCtrl.user.createTarget(val.result)
    if (res) {
      uni.showToast({
        title: '创建成功',
        icon: 'none'
      })
    }
  }
  show.value = false
}

const close = () => {
  show.value = false
}
</script>

<style lang="scss">
.custom-home-card-extra {
  display: flex;
  justify-content: center;
  align-items: center;

  .custom-home-card-extra-text {
    margin-left: 12rpx;
    margin-right: 12rpx;
  }
}
.custom-home-card-extra-content {
  padding-top: 30rpx;
  height: 120rpx;
  width: 686rpx;
  overflow-x: auto;
  gap: 10rpx;
  white-space: nowrap;
  .custom-extra-item {
    width: 25%;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
  }

  .custom-home-card-content-value {
    padding-bottom: 20rpx;
    font-weight: 500;
  }
}
</style>
